<template>
  <div class="setting-bgm">
    <div class="setting-bgm-tab">
      <div class="tab-list">
        <a href="javascript:;"
          @click.stop="click2MusicTab('MINE')"
          :class="{'is-music-active-tab':tab=='MINE'}">我的音乐</a>
      </div>

      <div class="tab-upload">
        <file-upload :url="fileUploadUrl" :fileUploadData="fileUploadData" :item="uploadItem"></file-upload>
      </div>
    </div>

    <div class="setting-bgm-music">
      <div class="bgm-list">
        <div class="bgm-list-tab">
          <a @click.stop="click2MusicType('ALL')" :class="{'is-music-type-active':musicType=='ALL'}" href="javascript:;">全部</a>
          <a v-if="false" @click.stop="click2MusicType('NEW')" :class="{'is-music-type-active':musicType=='NEW'}" href="javascript:;">最新</a>
          <a v-if="false" @click.stop="click2MusicType('COL')" :class="{'is-music-type-active':musicType=='COL'}" href="javascript:;">收藏</a>
        </div>

        <div class="bgm-list-box">
          <ul v-show="leftList && leftList.length > 0" class="left-list">
            <li :key="index" v-for="(item, index) in leftList"
              :class="{'is-music-cur':curItem.id==item.id}"
              @click.stop="click2CurMusic(item)">
              <span>{{item.name}}</span>
              <i :class="{'is-music-selected':selectedItem.id==item.id}" class="jy-icon-picking"></i>
            </li>
          </ul>

          <ul v-show="rightList && rightList.length > 0" class="right-list">
            <li :key="index" v-for="(item, index) in rightList"
              :class="{'is-music-cur':curItem.id==item.id}"
              @click.stop="click2CurMusic(item)">
              <span>{{item.name}}</span>
              <i :class="{'is-music-selected':selectedItem.id==item.id}" class="jy-icon-picking"></i>
            </li>
          </ul>
        </div>
      </div>

      <div class="bgm-player">
        <div class="bgm-player-box">
          <!-- <aplayer
            :music="curItem"
            theme="#127BFF"
            repeat="none"
            mutex
            controls
            :volume.sync="volume"
          /> -->
          <div ref="aplayer"></div>
        </div>

        <div class="bgm-player-btn">
          <a class="btn-cancel" :class="{'btn-cancel-disable':!bIsBgmExist}" href="javascript:;" @click.stop="click2CancelSelectedMusic">
            <i class="jy-icon-empty"></i>
            <span>&nbsp;取消背景音乐</span>
          </a>
          <a class="btn-set" :class="{'btn-set-disable':curItem.id==bgm.id}" href="javascript:;" @click.stop="click2SetSelectedMusic">
            设定
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import FileUpload from '@/views/components/file-upload.vue'
  import { fileUploadUrl } from '@/api/api'
  import { mapState } from 'vuex'
  import { mapActions } from 'vuex'
  import { MEDIAS } from '@/common/const'
  import { loadUtils } from "@/views/js/load-utils"
  
  export default {
    mixins: [loadUtils],
    setup () {
      return {
        tab: 'MINE',  // MINE：我的音乐
        musicType: 'ALL',  // ALL：全部  NEW：最新  COL：收藏
        uploadItem: {
          uploadTxt: '上传音频',
          type: MEDIAS.audio.type,
        },
        fileUploadUrl: fileUploadUrl,  // 图片上传 请求路径

        curItem: {  // 当前播放music
          title: '默认背景音乐',
          artist: '',
          src: "https://static.hd.xxx.com/jye/fe-web/mp3/default-mp3.mp3",
          pic: '#127BFF',
          id: '',
        },
        selectedItem: {},  // 当前设定music
        volume: 0.8,
      }
    },
    created(){
      if(!window.APlayer){
        this.dynamicsLoadScript(this.env.publicPath + 'js/APlayer.min.js', 'APlayer', this.initAPlayer)
      }
    },
    components: {
      // Aplayer,
      FileUpload,
    },
    computed: {
      ...mapState({
        fileUploadData: state => state.components.fileUploadData,
        mediaAllData: state => state.user.mediaAllData,
        bgm(state) {
          console.log(state.components.attrs.bgm);
          return _.cloneDeep(state.components.attrs.bgm);
        },
        attrs: state =>  _.cloneDeep(state.components.attrs)
      }),
      leftList() {
        if(this.mediaAllData[MEDIAS.audio.type]&&this.mediaAllData[MEDIAS.audio.type].list.length>0) {
          return this.mediaAllData[MEDIAS.audio.type].list.filter((v, i) => {
            return i%2==0;
          });
        }
        return false;
      },
      rightList() {
        if(this.mediaAllData[MEDIAS.audio.type]&&this.mediaAllData[MEDIAS.audio.type].list.length>0) {
          return this.mediaAllData[MEDIAS.audio.type].list.filter((v, i) => {
            return i%2==1;
          });
        }
        return false;
      },
      bIsBgmExist() {
        return this.bgm.id && Object.prototype.toString.call(this.bgm.id) === "[object String]" && this.bgm.id !== "";
      },
    },
    mounted() {
      this.initAPlayer(window.APlayer);
      // let that = this;

      // selectedItem
      this.selectedItem = _.cloneDeep(this.bgm);
      // init curItem
      if(this.bgm&&this.bgm.id) {
        this.curItem = {
          title: this.bgm.name || '',
          artist: this.bgm.singer || ' ',
          src: this.bgm.url || '',
          pic: this.bgm.cover || '#127BFF',
          id: this.bgm.id || '',
          item: this.bgm,
        };
      }
      else if(this.mediaAllData&&this.mediaAllData.length>0) {
        this.curItem = {
          title: this.mediaAllData[0].name || '',
          artist: this.mediaAllData[0].singer || ' ',
          src: this.mediaAllData[0].url || '',
          pic: this.mediaAllData[0].cover || '#127BFF',
          id: this.mediaAllData[0].id || '',
          item: this.mediaAllData[0],
        };
      }
    },
    methods: {
      ...mapActions({
        updateSettingBgm:"components/updateSettingBgm",
      }),
      click2MusicTab(type) {
        this.tab = type;
      },
      click2MusicType(type) {
        this.musicType = type;
      },
      click2CurMusic(item) {
        this.curItem = {
          title: item.name || '',
          artist: item.singer || ' ',
          src: item.url || '',
          pic: item.cover || '#127BFF',
          id: item.id || '',
          item: item,
        };
      },
      click2SetSelectedMusic() {
        if(!this.curItem || this.curItem=={} || this.curItem.id==this.bgm.id) return;  // if select music 或者 selected music 已被设置成 bgm
        this.selectedItem = _.cloneDeep(this.curItem.item);
        this.updateSettingBgm(this.selectedItem);
      },
      click2CancelSelectedMusic() {
        if(!this.bIsBgmExist) return;  // 未设置bgm
        this.selectedItem = {
          id: '',
          name: '',
          site_id: '',
          url: '',
          user_id: '',
        };
        this.updateSettingBgm(this.selectedItem);
      },
      initAPlayer(APlayer){
        if(!APlayer){
          return
        }
        let options = {
          audio: {
            name: this.curItem.title,
            artist: this.curItem.artist,
            url: this.curItem.src,
            theme: this.curItem.pic,
          },
          container: this.$refs.aplayer,
          theme: "127BFF"
        }
        this.aplayer = new APlayer(options)
      },
    },
  }
</script>

<style lang="scss">
  @import "@/assets/css/a-player.scss";
  .setting-bgm{
    position: relative;
    display: flex;

    .setting-bgm-tab{
      position: relative;
      width: 136px;
      height: 517px;
      background: #F3F5FA;

      .tab-list{
        padding-top: 24px;

        a{
          display: block;
          line-height: 44px;
          background: #FFFFFF;
          color: #43475C;
          font-size: 14px;
          text-align: center;
        }
        .is-music-active-tab{
          background: #127BFF;
          color: #FFFFFF;
        }
      }

      .tab-upload{
        position: absolute;
        width: 100%;
        bottom: 16px;
        display: flex;
        justify-content: center;

        .el-button{
          padding: 0 !important;
          width: 118px;
          height: 30px;
          background: #127BFF;
          border-radius: 2px;
          color: #FFFFFF;
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .setting-bgm-music{
      max-height: 517px;
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;

      .bgm-list{
        width: 100%;
        flex: 1;
        margin-top: 25px;

        .bgm-list-tab{
          display: flex;

          a{
            position: relative;
            font-size: 12px;
            color: #222;
            padding: 2px 12px;
            margin: 0 10px;
            line-height: 1.2;
          }
          a:after{
            position: absolute;
            content: '';
            width: 1px;
            height: 14px;
            top: 50%;
            transform: translateY(-50%);
            right: -10px;
            background: #bec5d0;
          }
          a:last-child:after{
            display: none;
          }
          a:first-child{
            margin-left: 20px;
          }
          .is-music-type-active{
            color: #FFFFFF;
            background: #127BFF;
            border-radius: 2px;
          }
        }

        .bgm-list-box{
          display: flex;
          overflow: auto;
          max-height: 426px;

          ul{
            width: 50%;
            height: 100%;

            li{
              position: relative;
              display: block;
              margin: 0 6px;
              line-height: 44px;
              padding: 0 24px;
              font-size: 14px;
              color: #43475C;

              i{
                position: absolute;
                display: none;
                font-size: 14px;
                color: #127BFF;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
              }
              .is-music-selected{
                display: block;
              }
            }
            .is-music-cur{
              background: #F3F5FA;
              color: #127BFF;
            }
          }
          ul:first-child{
            border-right: 1px solid #bec5d0;
          }
        }
        .bgm-list-box::-webkit-scrollbar{
          width: 1px;
        }
      }

      .bgm-player{
        width: 100%;
        height: 66px;
        display: flex;
        box-shadow: 0 -4px 4px 0 rgba(18,123,255,0.10), 0 0 0 #000;

        .bgm-player-box{
          flex: 1;

          .aplayer{
            margin: 0 !important;
            box-shadow: none !important;
          }
          .aplayer{
            background: transparent;
            box-shadow: none;
          }
          .aplayer.aplayer-narrow{
            width: inherit;
            height: inherit;
          }
          .aplayer.aplayer-narrow .aplayer-pic, .aplayer.aplayer-narrow .aplayer-body{
            width: inherit;
            height: inherit;
          }
        }

        .bgm-player-btn{
          display: flex;

          a{
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            height: 100%;
            // flex: 1;
            padding: 0 20px;
            min-width: 110px;
            white-space: nowrap;
          }

          .btn-set{
            background: #127BFF;
            color: #FFFFFF;
            font-size: 14px;
          }
          .btn-set-disable{
            background: #ccc !important;
            cursor: initial !important;
          }
          .btn-cancel{
            // background: #127BFF;
            color: #43475C;
            font-size: 14px;
          }
          .btn-cancel-disable{
            color: #aaa !important;
            cursor: initial !important;
          }
        }
      }
    }
  }
</style>
